<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>放大镜</title>
	</head>
	<style>
		.xiaotu{
			width:400px;
			height:400px;
			padding:0px;
			display:inline-block;
		}
		.xiaotu img{
			width:100%;
			height:100%;
			background-repeat: no-repeat;
		}
		.datu{
			padding:0px;
			width:400px;
			height:400px;
			display:inline-block;
			background-image: url(img/1.png);
			background-size:400% 400%;
			background-repeat: no-repeat;
		}
		.xiaoyidong{
		    width:100px;
		    height: 100px;
		    background-image: url(http://img-tmdetail.alicdn.com/tps/i4/T12pdtXaldXXXXXXXX-2-2.png);
		    position: absolute;
		}			
	</style>
	<body>
		<div class="xiaotu"><img src="img/1.png"/></div>
		<div class="datu"></div>
		<div class="xiaoyidong"></div>
		<script src="js/jQuery-3.4.1.js" type="text/javascript" charset="UTF-8"></script>
		<script src="js/jquery.js" type="text/javascript" charset="UTF-8"></script>
		<script>
			//先获取坐标
			$("html").mousemove(function(e){
				var you=e.clientX-50;
				var xia=e.clientY-50;
				//判断坐标位置
				if(you<8){
					you=8;
				}
				if(you>308){
					you=308;
				}
				if(xia<8){
					xia=8;
				}
				if(xia>308){
					xia=308;
				}
				//给坐标定位
				$(".xiaoyidong").css({
					"left":you,
					"top":xia
				
				});
				$(".datu").css({
					"background-position-x":-4*(you-8)+"px",
					"background-position-y":-4*(xia-8)+"px"
				})
			})
		</script>
	</body>
</html>
